<template>
  <div id="distributionlist" v-cloak> 



    <div class="demo" :style="{  height: dtheight + 'px' }">


        <el-upload
            class="upload-demo"
            drag
            action="uploadUrl"
            :before-upload="beforeupload"
            :http-request="ImgUploadSectionFile" style="width:100%;"
            >
            <i class="el-icon-upload"></i>
          
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>
        
       
       <div style="width:50%; margin:auto;margin-top:10px;height:30px;" v-if="jd_show">
              <el-progress :percentage="progressPercent" :color="customColorMethod" :format="format" style="display:flex;align-items: center;"></el-progress>
       </div>

        <div style="text-align: center;width:100%;" v-if="button_show">
            <el-button type="primary" style="width:250px;margin-top:20px;background: #F5CF49;border:none;" @click="qr_but">确认</el-button>
        </div>


         <el-form ref="from" :model="from" label-width="80px" style="width:50%;">  

            <div style="display:flex;margin-top:30px;">
                    <el-form-item label="安卓">
                        <el-select  v-model="from.android[0]" placeholder="请选择状态"  @change="select_change1">
                              <el-option  v-for="(item,index) in select_data" :key="index" :label="item.id" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                     <el-form-item label="" label-width="0px" style="margin-left:15px;">
                          <el-select  v-model="from.android[1]" placeholder="请选择状态">
                             <el-option  v-for="(item,index) in select_data" :key="index" :label="item.id" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                     <el-form-item label="" label-width="0px" style="margin-left:15px;">
                         <el-select  v-model="from.android[2]" placeholder="请选择状态">
                              <el-option  v-for="(item,index) in select_data" :key="index" :label="item.id" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
            </div>

            <div style="display:flex;margin-top:30px;">
                    <el-form-item label="苹果">
                        <el-select  v-model="from.ios[0]" placeholder="请选择状态" @change="select_change2">
                            <el-option  v-for="(item,index) in select_data" :key="index" :label="item.id" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                     <el-form-item label="" label-width="0px" style="margin-left:15px;">
                         <el-select  v-model="from.ios[1]" placeholder="请选择状态">
                             <el-option  v-for="(item,index) in select_data" :key="index" :label="item.id" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                     <el-form-item label="" label-width="0px" style="margin-left:15px;">
                         <el-select  v-model="from.ios[2]" placeholder="请选择状态">
                            <el-option  v-for="(item,index) in select_data" :key="index" :label="item.id" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
            </div>

            <div style="text-align: center;width:100%;">
               <el-button type="primary" style="width:250px;margin-top:20px;background: #F5CF49;border:none;" @click="up_but(2)">确认</el-button>
              </div>

          </el-form>


    </div> 


   

   



   </div>
</template>

<script>
//import * as qiniu from "qiniu-js";
var qiniu = require('qiniu-js')
export default {
   name: 'distributionlist',
   props:{
      data:{  
        //type:Array,
       default:()=>[]
     },
  },
  data () {
    return {
        dtheight:'500',  //窗口高度
        button_show:false,
        my_file:'',
        progressPercent:0, //进度条
        jd_show:false, //是否显示进度条
        from:{
          android:[],
          ios:[],
        },
        android:'',
        ios:'',
        select_data:[{id:0},{id:1},{id:2},{id:3},{id:4},{id:5},{id:6},{id:7},{id:8},{id:9}],
        up_android:'',
        up_ios:'',
    }
  },
   components:{

  },
  created(){
    this.dtheight = window.innerHeight - 180
    this.list_fun()
  },
  mounted (){
    
  },
  methods: { 
      qr_but(){

            let file = this.my_file; // 对象，上传的文件
            let filename = file.name
            let key; // 文件资源名
            let typea;
            if(filename.length > 1 && filename ) {       
                  var ldot = filename.lastIndexOf(".");
                  var type = filename.substring(ldot + 1);  
                  typea =  type            
                  key = this.upwebpack + '.' + type
                  console.log(key,"key")
            }

          this.post("/package/getUpToken", {
              type:typea
          }).then(res => {              
              console.log(res.result)                       
              /*
              * config.useCdnDomain: 是否使用 cdn 加速域名，true or false，默认为 false。
              * config.disableStatisticsReport: 是否禁用日志报告，为布尔值，默认为false。
              * config.region: 选择上传域名区域；当为 null 或 undefined 时，自动分析上传域名区域
              * config.retryCount: 上传自动重试次数（整体重试次数）；默认3次（即上传失败后最多重试两次）；
              * config.concurrentRequestLimit: 分片上传的并发请求量，number，默认为3；
              * config.checkByMD5: 是否开启 MD5 校验，在断点续传时校验分片，默认为 false，不开启。
              */
              let config = {
                  useCdnDomain: true, 
                  region: qiniu.region.z2,
                  //concurrentRequestLimit:10,
                  //checkByMD5:true
                 // uphost:'sybg.download.isartop.com/'
              };

              /*
              * fname: string，文件原文件名.
              * params: object，用来放置自定义变量;
              * mimeType: null || array，用来限制上传文件类型，为 null 时表示不对文件类型限制；
              * 限制类型放到数组里： ["image/png", "image/jpeg", "image/gif"]
              */
              let putExtra = {
                  fname: filename,
                  params: {}, 
                  mimeType: null
              };

              let loading ;  //视频上传遮罩层
              let that =this;
              let observe = {
                  next (res) {

                     loading = that.$loading({   //视频上传遮罩层
                        lock: true,
                        text: '文件上传中',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                      });
                      that.jd_show = true  //显示
                      //console.log('已上传大小，单位为字节：' + res.total.loaded)
                      //console.log('本次上传的总量控制信息，单位为字节：' + res.total.size)
                      //console.log('当前上传进度，范围：0～100：' + res.total.percent);
                      that.progressPercent = res.total.percent
                  },
                  error (err) {
                      console.log(err.code)
                      console.log(err.message)
                      console.log(err.isRequestError)
                      console.log(err.reqId)
                  },
                  complete (res) {
                      //完成后的操作
                      //上传成功以后会返回key 和 hash  key就是文件名了！
                       loading.close();  //关闭视频上传遮罩层
                       that.jd_show = false  //隐藏进度条
                       that.button_show = false //隐藏上传按钮
                       console.log(res,"aaa")
                  }
              };
              //开始上传  token 需要找后端获取(单独的方法)
              let observable = qiniu.upload(file, key, res.result, putExtra, config)
              let subscription = observable.subscribe(observe)
              //subscription.unsubscribe()

          })
      },  
      qr_but_fun(){ 
           const loading = this.$loading({   //视频上传遮罩层
                lock: true,
                text: '文件上传中',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });

          
      },
      beforeupload(file){      
          
            if(this.upimglx1(file) == false){  //判断是否为fales
              this.upimglxtitle1()  //执行弹出错误             
              return false
            } 
             
            this.my_file = file
            this.button_show = true
            console.log(file)

     
        //   return false;
      },
     ImgUploadSectionFile(param){//图片上传    
     },
     customColorMethod(progressPercent) {  //上传进度条
        if (progressPercent < 30) {
          return '#909399';
        } else if (progressPercent < 70) {
          return '#e6a23c';
        } else {
          return '#67c23a';
        }
      },
      format(progressPercent) {  //上传进度条
        return progressPercent === 100 ? '上传完成' : `上传中${progressPercent}%`;
      },
      list_fun(){
        this.post("/package/versionInfo", {
             
	        }).then(res => {
                console.log(res)
                this.android = res.result.app_version_android
                this.ios = res.result.app_version_ios

                this.from.android = this.android.split('.').map(Number);
                this.from.ios = this.ios.split('.').map(Number);
                //console.log(this.from.android,"a") //输出["123", "456", "789"]
                //console.log(this.from.ios,"b") //输出["123", "456", "789"]
                
         })
      },
      up_but(){
          var android_a = this.from.android;  //定义数组
          var android_b = android_a.join(".");  //指定分隔符

          var ios_a = this.from.ios;  //定义数组
          var ios_b = ios_a.join(".");  //指定分隔符  
          
        //   if( JSON.stringify(this.from.android) == JSON.stringify(this.android.split('.').map(Number))){
        //         this.up_android = ''
               
        //   }else{
        //         this.up_android = android_b
        //   }

         this.up_android = android_b


        //   if( JSON.stringify(this.from.ios) == JSON.stringify(this.ios.split('.').map(Number))){
        //          this.up_ios = ''
               
        //   }else{
        //         this.up_ios = ios_b
        //   }

          this.up_ios = ios_b

         

          if(this.up_android != '' || this.up_ios != ''){
            
            console.log(this.up_android,"a")
            console.log(this.up_ios,"b")

            this.post("/package/setNewVersion", {
                android:this.up_android,
                ios:this.up_ios,
            }).then(res => {
                if(res.error_code == 0){
                    this.open1(res.result,'success')  //提示框
                }else {
                    this.open1(res.message,'warning')
                }

            })


          }else{
                 this.open1('版本号未修改','warning')
          }
      },
      select_change1(){
        this.from.android[1] = 0
        this.from.android[2] = 0
     },
     select_change2(){
        this.from.ios[1] = 0
        this.from.ios[2] = 0
     }

  }
}
</script>


<style scoped>
[v-cloak]{
    display: none;
}
.demo{
    overflow-y:auto;
}
.mytitle{
    height: 35px;
}
.mytitle_item{
    display: flex;
    align-items: center;
}
.mytitle_item::before{
  content:'';
  width: 5px;
  height: 15px;
  background: #F5CF49;
  display: block;
}
.upload-demo>>>.el-upload{
    width: 100%;
    height: 300px;
}
.upload-demo>>>.el-upload-dragger{
    width: 100% !important;
    height: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.el-progress--line >>>.el-progress-bar{
    flex: 1;
}
</style>